<template>
    <div class="cart-container" v-if="goods_info">
        <div class="shoppingcart-header">
            <span class="edit"></span>
            <span class="cart-title">购物车</span>
            <span class="edit">编辑</span>
        </div>
        <div class="shoppingcart-content">
           <ul class="goods-list">
              <van-checkbox-group v-model="result" ref="checkboxGroup">  
            
               <li v-for="(commodity , index) in goods_info"   name="item.shopid" :key=commodity.id class="goods-single">
                    <van-swipe-cell  :right-width="60"  :on-close="onClose">
                        <div class="goodscart-detail">
                            <van-checkbox checked-color="#794DFA" :name="index" icon-size=".35rem" @click="handleSelect(index,commodity)"></van-checkbox>
                            <van-card
                                :num="commodity.digit"
                                :price="commodity.price"
                                :title="commodity.name"
                                :thumb="commodity.imgurl"
                            >
                            <template #footer>
                                <van-button size="10px" class="numchange" @click="commodity.digit > 1? commodity.digit--:''">-</van-button>
                                <van-field v-model="commodity.digit" type="digit" maxlength="2" minlength="1"/>
                                <van-button size="10px" class="numchange" @click="commodity.digit < 99? commodity.digit++:''">+</van-button>
                                
                            </template>
                                
                            </van-card>
                            
                        </div>
                        
                        <template #right>
                            <van-button square text="删除" type="danger" style="{height: 100%}" class="delete-button"/>
                        </template>
                  </van-swipe-cell>
                <!-- </van-checkbox-group> -->
               </li>
               
               </van-checkbox-group>
           </ul>
        </div>
        <div class="shoppingcart-summary">
            <van-checkbox v-model="checkedAll" @click="checkAll"  checked-color="#794DFA" icon-size=".35rem">全选</van-checkbox>
            <div class="sumnum">
                <div>合计:¥{{sum}}</div>
                <router-link to="/payment" tag="span">
                   <van-button type="primary" size="mini" color="gray">结算</van-button>
                </router-link>
            </div>
            
        </div>
        <Footer :Factive="active"></Footer>
    </div>
</template>

<script>
import Vue from 'vue';
import { Checkbox ,CheckboxGroup, Icon , Card , Field , Button , SwipeCell} from 'vant'
import Footer from '../components/footer'

Vue.use(SwipeCell);
Vue.use(Field);
Vue.use(Card);
Vue.use(Icon);
Vue.use(Checkbox);
Vue.use(Button);
Vue.use(CheckboxGroup)
export default {
    data(){
        return {
            goods_info:this.$store.state.cart,
            sum:0,
            result:[],
            checkedAll:false,
            active:2,   
           
        }             
    },
    components:{
        Footer
    },
    created(){
        // console.log(this.$store.state.cart)
        // console.log(this.$store.state.cart[0])
    },
    methods: {
        checkAll(){
            
           
            
            if(this.checkedAll === true){
                
             this.$refs.checkboxGroup.toggleAll(true);
            } 
            else {
               this.$refs.checkboxGroup.toggleAll(); 
            }
            for(let  i = 0 ; i < this.result.length ; i++ ){
                this.$store.state.cart.forEach(element => {
                    if(element.id ===  this.result[i]){
                        element.checked = true
                        
                    }
                });
            }
            this.$store.state.cart.forEach(element => {
                    if( element.checked ) {
                        this.sum += element.price * element.digit
                    }
                });
            
        },
        onClose({ position, instance }) {
            switch (position) {
                case 'left':
                case 'cell':
                case 'outside':
                instance.close();
                break;
                case 'right':
                Dialog.confirm({
                    message: '确定删除吗？',
                }).then(() => {
                    instance.close();
                });
                break;
            }
        },
        handleClick(index , goodsname ,shopname){
            // console.log(this.$store.state.cart[0])
         
            let data = this.$store.state.cart[index].goods
            // console.log(data , data.length)
            if( !this.$store.state.cart[index].shop ){
            for( let i = 0 ; i < data.length ; i ++ ){
                this.result1.push( data[i].id)             
            }
            console.log(this.result1)
            this.$store.state.cart[index].shop = true
            }else{
                this.$store.state.cart[index].shop = false
                this.result1 = []
            }
            
            // console.log(this.result1)
        },
        handleSelect(index ,commodity){
            // console.log(this.$store.state.paygoods.length ,this.result.length )
            let payload = {
                index , 
                commodity
            }
            console.log(this.$store.state.cart.length , this.result.length)
            console.log(this.result)

            this.$store.dispatch('addpayGoods' , payload)
            if( this.$store.state.cart.length === this.result.length ){
                this.checkedAll = true 
            }else{
                this.checkedAll = false
            }
            for(let  i = 0 ; i < this.result.length ; i++ ){
                this.$store.state.cart.forEach(element => {
                    if(element.id === this.result[i]){
                        element.checked = true
                        
                    }
                });
            }
            this.$store.state.cart.forEach(element => {
                    if( element.checked ) {
                        this.sum += element.price * element.digit
                    }
                });

            //  let data = this.$store.state.cart[index].goods
            //  console.log(this.result1)
            //  let isShop =  this.result1.some(item => {
            //     return item !== shopname
            // })
            // if( this.result1.length === data.length && isShop){
            //     this.result1.push(shopname)
            // }
            // if( this.result1.length === data.length && isShop === false){
            //     // this.result1.push(shopname)
            //     let shopnameIndex = this.result1.indexOf(shopname)
            //     this.result1.splice(shopnameIndex , 1);
            // }
            
         
        }
            
        },
        
}
</script>

<style lang="stylus" scoped>
@import '../assets/border.styl'
.cart-container
    display flex
    flex-direction column
    width 100%
    height 100%
    .shoppingcart-header
        display flex
        width 100%
        height .88rem
        justify-content space-between
        align-items center
        padding 0 10px
        $border(0 0 1px 0, #eee)
        .cart-title
            font-size .35rem
            text-align center
            flex 1
        .edit 
            font-size .25rem 
            width 30px  
    .shoppingcart-summary
        width 100%
        height .88rem
        font-size .3rem
        padding 0 10px
        position sticky
        bottom 1rem
        display flex
        justify-content space-between
        align-items center
        .sumnum 
            display flex
            flex-direction row
            justify-content space-between
            align-items center
    .shoppingcart-content
        width 100%
        flex 1
        background-color #f2f2f2
        overflow scroll
        .goods-list
            height 100% 
            font-size .3rem
            font-weight 500
            overflow scroll
            .goods-single
                margin-top 10px
                background-color #fff
                display flex
                flex-direction  column
                .goods-shop
                    width 100%
                    height .8rem
                    padding 0 10px
                    color #794DFA
                    $border(0 0 1px 0, #eee)
                    display flex
                    flex-direction row
                    align-items center
                    .shop-collect-o
                        margin-left .15rem
                        margin-right .15rem
                .goodscart-detail
                    width 100%
                    display flex
                    padding 0 10px
                    .van-card
                        font-size .3rem 
                        flex 1 
                        background-color #fff
                        .van-card__header
                            .van-card__thumb 
                                display inline-block
                                $border(1px,#eee)
                                width 1.25rem
                                height 1.25rem
                            .van-card__content
                                padding-bottom .416667rem
                                .van-card__desc
                                    font-size .25rem
                                .van-card__bottom
                                    display flex
                                    .van-card__price
                                        font-size .25rem
                                        color red
                                        margin-right .083333rem
                                    .van-card__num
                                        font-size .25rem    
                        .van-card__footer   
                            display flex
                            width 1.8rem
                            height .6rem
                            float right
                            $border(1px,black)
                            .numchange 
                                width .6rem !important
                                height 100% !important
                                display flex
                                align-items center
                                justify-content center
                                border 0
                                margin 0
                            .van-field 
                                width .6rem
                                padding 0  
                                display flex
                                align-items center 
                                justify-content center 
                                $border(0 1px 0 1px,black)         
</style>

<style lang="css">
.van-field__control{
    text-align: center;
}
.sumnum .van-button{ 
    margin-left: .2rem;
    width: 1.5rem !important;
    height: .6rem !important;
    font-size: .3rem;
    box-shadow: 0 0 .5rem 0  rgb(192, 189, 189);
}
 .delete-button {
    height: 100%;
  }

/* .van-swipe-cell__left,
.van-swipe-cell__right {
  display: inline-block;
  width: 65px;
  height: 44px;
  font-size: 15px;
  line-height: 44px;
  color: #fff;
  text-align: center;
  background-color: #f44;
} */
.van-swipe-cell__right .van-button--normal{
    width: 60px;
    height: 100%;
    padding: 0 15px !important;
}
</style>
               